@extends('admin.base')

@section('title', '团队体系')

@section('content')
    <style type="text/css">
        .tree {
            min-height:20px;
            padding:19px;
            margin-bottom:20px;
            background-color:#fbfbfb;
            border:1px solid #999;
            -webkit-border-radius:4px;
            -moz-border-radius:4px;
            border-radius:4px;
            -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
            -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
            box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05)
        }
        .tree ul {
            margin-left: 25px;
        }
        .tree li {
            list-style-type:none;
            margin:0;
            padding:10px 5px 0 5px;
            position:relative
        }
        .tree li::before, .tree li::after {
            content:'';
            left:-20px;
            position:absolute;
            right:auto
        }
        .tree li::before {
            border-left:1px solid #999;
            bottom:50px;
            height:100%;
            top:0;
            width:1px
        }
        .tree li::after {
            border-top:1px solid #999;
            height:20px;
            top:25px;
            width:25px
        }
        .tree li span {
            -moz-border-radius:5px;
            -webkit-border-radius:5px;
            border:1px solid #999;
            border-radius:5px;
            display:inline-block;
            padding:3px 8px;
            text-decoration:none
        }
        .tree li.parent_li>span {
            cursor:pointer
        }
        .tree>ul>li::before, .tree>ul>li::after {
            border:0
        }
        .tree li:last-child::before {
            height:30px
        }
        .tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span {
            background:#eee;
            border:1px solid #94a0b4;
            color:#000
        }
        .add_color{
            color: #dddddd;
        }
        .dj{color:#FF5722;}
        .member_id{color:#01AAED;}
    </style>
    <fieldset class="layui-elem-field">
        <div class="layui-field-box">
            <a class="layui-btn-sm" href="{{url('admin/home')}}">首页</a>&raquo;
            <span class="layui-btn-sm" href="{{url('admin/user/team')}}">团队体系</span>
        </div>
    </fieldset>
    <div class="main-content" style="margin-left: 0">
        <div class="wrapper">
            <div class="row">
                <div class="col-md-12">
                    <section class="panel">
                        <div class="panel-body">
                            <div class="row">
                                <form role="form" class="form-inline" method="get"
                                      style="padding-left: 15px;margin-bottom: 20px">
                                    @csrf
                                    <div class="form-group">
                                        &nbsp;&nbsp;
                                        用户ID:
                                        <div class="layui-input-inline">
                                            <input type="text" name="user" class="layui-input" id="" autocomplete="off"
                                                   placeholder="请输入用户ID"
                                                   value="{{ isset($user) ? $user : '' }}">
                                        </div>
                                    </div>
                                    <button class="layui-btn" type="submit">搜索</button>
                                </form>
                            </div>
                            <table class="table table-striped">
                                <thead>
                                <tr>
                                    <th>会员网体</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td scope="row" style="text-align: left">
                                        <div class="tree well">
                                            @if($list != null)
                                                @foreach ($list as $vo)
                                                    @if ($vo['is_parent'] == 0)
                                                        <ul>
                                                            <li class="parent_li">
                                                                <span data="{{$vo['id']}}" dj="1"
                                                                      onclick="span_click($(this));" style="cursor:pointer;">
                                                                    <i class="fa fa-folder-open"></i>
                                                                    <font class="dj">顶级</font> /
                                                                    <font class="member_id">{{$vo['user']}} (UID:{{$vo['id']}} / 团队人数:{{$vo['team']}} / 推荐人数:{{$vo['push']}})</font>
                                                                </span>
                                                            </li>
                                                        </ul>


                                                    @else
                                                        <ul>
                                                            <li>
                                                                <span>
                                                                    <i class="fa fa-folder-open" dj="1"
                                                                       style="color:#d2d2d2; white-space:nowrap;"></i>
                                                                    <font class="dj">顶级</font>
                                                                    <font class="member_id">{{$vo['user']}} (UID:{{$vo['id']}} / 团队人数:{{$vo['team']}} / 推荐人数:{{$vo['push']}})</font>
                                                                </span>
                                                            </li>
                                                        </ul>
                                                    @endif
                                                @endforeach
                                            @else
                                                暂无数据
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script type="text/javascript">

        $(function () {
            $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', '点击隐藏子级');
            $('.tree li.parent_li > span').off('click').on('click', function () {
                let children = $(this).parent('li.parent_li').find(' > ul > li');
                if (children.is(":visible")) {
                    children.hide();
                    $(this).attr('title', '点击展开子级').find(' > i').addClass('fa-plus-circle').removeClass('fa-minus-circle');
                } else {
                    children.show();
                    $(this).attr('title', '点击隐藏子级').find(' > i').addClass('fa-minus-circle').removeClass('fa-plus-circle');
                }
            });
        });

        function span_click(obj) {
            obj.removeAttr("onclick");
            let id = obj.attr('data');
            let dj = Number(obj.attr('dj')) + 1;
            let that = obj.parent();
            if (obj.find('> i').hasClass('fa-plus-circle')) {
                obj.attr('title', '点击隐藏子级').find(' > i').addClass('fa-minus-circle').removeClass('fa-plus-circle')
            }
            let _token = $('{{ csrf_field() }}').val();
            $.post("/admin/user/team_list", {id, _token}, function (data) {
                json_data = JSON.parse(data)
                console.log(json_data)
                for (let i of json_data) {
                    if (i.is_parent == 0) {
                        if (that.find('ul').first().length === 0) {
                            that.append(
                                '<ul>' +
                                '<li class="parent_li">' +
                                '<span data="' + i.id + '" dj="' + dj + '" onclick="span_click($(this));"  style="cursor:pointer;">' +
                                '<i class="fa fa-plus-circle"></i> ' +
                                '<font class="dj">' + dj + '级</font> /' +
                                '<font class="member_id"> ' + i.user + ' (UID: '  + i.id + '团队人数: ' + i.team + ' / 推荐人数: ' + i.push +')  </font>'+
                                '</span>&nbsp;&nbsp;' +
                                '</li>' +
                                '</ul>');
                        } else {
                            that.find('ul').first().append(
                                '<li class="parent_li">' +
                                '<span data="' + i.id + '" dj="' + dj + '" onclick="span_click($(this));"  style="cursor:pointer;">' +
                                '<i class="fa fa-plus-circle" ></i> ' +
                                '<font class="dj">' + dj + '级</font> /' +
                                '<font class="member_id"> ' + i.user + ' (UID: ' + i.id + ' 团队人数: ' + i.team + ' / 推荐人数: ' + i.push +')  </font>'+
                                '</span>&nbsp;&nbsp;' +
                                '</li>');
                        }
                    } else {
                        if (that.find('ul').first().length === 0) {
                            that.append(
                                '<ul>' +
                                '<li>' +
                                '<span dj="' + dj + '">' +
                                '<i class="fa fa-leaf"></i> ' +
                                '<font class="dj">' + dj + '级</font> /' +
                               '<font class="member_id"> ' + i.user + ' (UID: '+ i.id +' 团队人数: ' + i.team + ' / 推荐人数: ' + i.push +')  </font>'+
                                '</span>&nbsp;&nbsp;' +
                                '</li>' +
                                '</ul>');
                        } else {
                            that.find('ul').first().append(
                                '<li>' +
                                '<span dj="' + dj + '">' +
                                '<i class="fa fa-leaf"></i> ' +
                                '<font class="dj"> ' + dj + '级</font> /' +
                               '<font class="member_id"> ' + i.user + ' (UID ' + i.id+ ' 团队人数: ' + i.team + ' / 推荐人数: ' + i.push +')  </font>'+
                                '</span>&nbsp;&nbsp;' +
                                '</li>');
                        }
                    }
                }
                $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', '点击隐藏子级');
                $('.tree li.parent_li > span').off('click').on('click', function () {
                    let children = $(this).parent('li.parent_li').find(' > ul > li');
                    if (children.is(":visible")) {
                        children.hide();
                        $(this).attr('title', '点击展开子级').find(' > i').addClass('fa-plus-circle').removeClass('fa-minus-circle');
                    } else {
                        children.show();
                        $(this).attr('title', '点击隐藏子级').find(' > i').addClass('fa-minus-circle').removeClass('fa-plus-circle');
                    }
                });
            });
        }




    </script>
@endsection
